<script setup lang="ts">
import { ref, reactive } from 'vue';
import { Search } from '@element-plus/icons-vue'
import { recycleProviderSearch, recycleProviderRecover, recycleProviderRemove } from '@/api/recycle';
import type { AssetMetadata } from '@/types/AssetMetadata';
import { messages, confirms } from '@/utils/currency';
import ListVsiews from '@/components/common/ListView.vue';
import { useStore } from '@/stores';
const store = useStore();
const isMobile = ref(store.isMobile);

interface DeletedAssetMetadata extends AssetMetadata {
    $typeName: string;
    deletedAt: string;
    edit: boolean;
    active: boolean;
}

const condition = reactive({
    hash: '',
    name: '',  // 资产名称
    namespaceId: store.namespaceId,
})

// 状态管理方法
const setDetail = (value: DeletedAssetMetadata) => store.setDetail(value);
const tableData = ref<DeletedAssetMetadata[]>([])

// 搜索资产，根据条件和分页参数查询资产列表
const getList = async () => {
    const arecycleSearchData = await recycleProviderSearch(condition);
    const newData: DeletedAssetMetadata[] = [];
    // 处理数据格式
    arecycleSearchData.forEach((item: any) => {
        newData.push({
            ...item.asset, // 展开 asset 的属性
            $typeName: item.$typeName,
            deletedAt: item.deletedAt,
            active: false,
            edit: false,
        });
    });
    tableData.value = newData; // 更新表格数据
}

getList();



const multipleSelection = ref<DeletedAssetMetadata[]>([])
// 操作
const generateActions = (row: DeletedAssetMetadata) => [
    {
        label: '还原',
        icon: 'icon-huanyuan',
        callback: () => reset(row),
    },
    {
        label: '删除',
        icon: 'icon-shanchu',
        callback: () => remove(row),
    },
    {
        label: '详情',
        icon: 'icon-xiangqing',
        callback: () => setDetail(row),
    },
];
// 更新选中项
const updateSelection = (val: DeletedAssetMetadata[]) => {
    multipleSelection.value = val; // 触发父组件的事件，更新选中项
};
// 资产信息 新增和编辑成功
const handleSuccess = (msg = "还原") => {
    getList();
    messages(msg + "成功", 'success');
};




// 批量 还原
const batchRemove = async () => {
  if(multipleSelection.value){
    for (const item of multipleSelection.value) {
      await recycleProviderRemove(item.namespaceId, item.hash);
    }
    handleSuccess()
  }
}

// 批量删除
const batchReset = async () => {
    if(multipleSelection.value){
        for (const item of multipleSelection.value) {
            await recycleProviderRecover(item.namespaceId, item.hash);
        }
        handleSuccess()
    }
}


// 还原
const reset = async ({ namespaceId, hash }: AssetMetadata) => {
    await recycleProviderRecover(namespaceId, hash);
    handleSuccess()
};
// 彻底删除
const remove = async ({ namespaceId, hash }: AssetMetadata) => {
    confirms().then(async () => {
        await recycleProviderRemove(namespaceId, hash);
        handleSuccess("删除")
    })

};
</script>

<template>
    <div class="flexSBCenter mb10">
        <div class="flex">
            <template v-if="multipleSelection.length">
                <el-button type="primary" @click="batchReset">还原</el-button>
                <el-button type="primary" @click="batchRemove">删除</el-button>
            </template>
        </div>
        <!-- /哈希值/内容格式/资产名称ID -->
        <el-input class="class_search_input" v-model="condition.name" clearable placeholder="名称" :suffix-icon="Search"
            @blur="getList" />
    </div>
    <ListVsiews :data="tableData" :generateActions="generateActions" @update:selection="updateSelection">
        <template #dynamic-columns>
            <el-table-column :label="$t('assets.tabel.name')" width="auto">
                <template #default="scope">
                    <EllipsisText :text="scope.row.name" />
                </template>
            </el-table-column>
            <template v-if="!isMobile">
                <el-table-column prop="deletedAt" :label="$t('assets.tabel.delTime')"></el-table-column>
                <el-table-column prop="size" :label="$t('assets.tabel.size')"></el-table-column>
            </template>
        </template>
        <template #operate="{ scope }">
            <span v-if="!isMobile" class="iconfont icon-huanyuan pointer" @click="reset(scope.row)"></span>
        </template>
    </ListVsiews>
</template>